<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-container">
			<view class="search-bar">
				<text class="search-icon">🔍</text>
				<input class="search-input" placeholder="搜索医生名、科室或疾病" confirm-type="search" v-model="searchKeyword"
					@confirm="searchDoctors" />
				<text class="clear-icon" v-if="searchKeyword" @click="clearSearch">✕</text>
			</view>
		</view>

		<!-- 筛选条件 -->
		<!-- 		<view class="filter-container">
			<scroll-view scroll-x="true" class="filter-scroll">
				<view class="filter-item" v-for="(filter, index) in filters" :key="index"
					:class="{ active: filter.active }" @click="toggleFilter(index)">
					{{ filter.name }}
					<text class="filter-icon" v-if="filter.type === 'dropdown'">&#xe665;</text>
				</view>
			</scroll-view>
		</view> -->

		<!-- 热门科室 -->
		<view class="popular-departments" v-if="!searchKeyword && !showSearchResult">
			<view class="section-title">科室</view>
			<view class="department-grid">
				<view class="department-item" v-for="(dept, index) in popularDepartments" :key="index"
					@click="selectDepartment(dept)">
					<image :src="dept.icon" class="dept-icon"></image>
					<text class="dept-name">{{ dept.name }}</text>
				</view>
			</view>
		</view>

		<!-- 热门医生推荐 -->
		<view class="popular-doctors" v-if="!searchKeyword && !showSearchResult">
			<view class="section-title">热门医生</view>
			<view class="doctor-list">
				<view class="doctor-card" v-for="(doctor, index) in popularDoctors.slice(0,5)" :key="index">
					<view class="doctor-avatar">
						<image :src="doctor.avatar" mode="aspectFill"></image>
					</view>
					<view class="doctor-info">
						<view class="doctor-name">{{ doctor.name }}<text class="doctor-title">{{ doctor.title }}</text>
						</view>
						<view class="doctor-specialty">{{ doctor.department }} | {{ doctor.specialty }}</view>
						<view class="doctor-hospital">{{ doctor.hospital }}</view>
						<view class="doctor-stats">
							<view class="stat-item">
								<text class="stat-value">{{ doctor.experience }}年</text>
								<text class="stat-label">经验</text>
							</view>
							<view class="stat-item">
								<text class="stat-value">{{ doctor.patients }}+</text>
								<text class="stat-label">诊疗患者</text>
							</view>
							<view class="stat-item">
								<text class="stat-value">{{ doctor.rating }}</text>
								<text class="stat-label">满意度</text>
							</view>
						</view>
					</view>
					<view class="doctor-action">
						<image class="collImg"
							:src="doctor.collected ? '/static/doctors/collected.png' : '/static/doctors/uncollect.png'"
							mode="aspectFill" @click="collectDoc(doctor.id)"></image>
						<view class="action-btn" @click="viewDoctorProfile(doctor)">预约</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="search-results" v-if="showSearchResult">
			<view class="result-count">找到 {{ searchResults.length }} 位医生</view>
			<view class="doctor-list">
				<view class="doctor-card" v-for="(doctor, index) in searchResults" :key="index"
					@click="viewDoctorProfile(doctor)">
					<view class="doctor-avatar">
						<image :src="doctor.avatar" mode="aspectFill"></image>
					</view>
					<view class="doctor-info">
						<view class="doctor-name">{{ doctor.name }}<text class="doctor-title">{{ doctor.title }}</text>
						</view>
						<view class="doctor-specialty">{{ doctor.department }} | {{ doctor.specialty }}</view>
						<view class="doctor-hospital">{{ doctor.hospital }}</view>
						<view class="doctor-stats">
							<view class="stat-item">
								<text class="stat-value">{{ doctor.experience }}年</text>
								<text class="stat-label">经验</text>
							</view>
							<view class="stat-item">
								<text class="stat-value">{{ doctor.patients }}+</text>
								<text class="stat-label">诊疗患者</text>
							</view>
							<view class="stat-item">
								<text class="stat-value">{{ doctor.rating }}</text>
								<text class="stat-label">满意度</text>
							</view>
						</view>
					</view>
					<view class="doctor-action">
						<view class="action-btn">预约</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 无搜索结果 -->
		<view class="no-results" v-if="showSearchResult && searchResults.length === 0">
			<image :src="'/static/index/yuyue.png'" class="no-result-image"></image>
			<view class="no-result-text">未找到匹配的医生</view>
			<view class="no-result-tip">请尝试其他关键词或选择热门科室</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				showSearchResult: false,
				collected: false,
				collectDocSrc: '/static/doctors/uncollect.png',
				globaApi: '',
				filters: [{
						name: '全部科室',
						type: 'dropdown',
						active: false
					},
					{
						name: '综合排序',
						type: 'dropdown',
						active: false
					},
					{
						name: '线上问诊',
						type: 'checkbox',
						active: false
					},
					{
						name: '可预约',
						type: 'checkbox',
						active: false
					},
					{
						name: '三甲医院',
						type: 'checkbox',
						active: false
					}
				],
				popularDepartments: [{
						id: 1,
						name: '内科',
						icon: '/static/index/neike.png'
					},
					{
						id: 2,
						name: '外科',
						icon: '/static/index/waike.png'
					},
					{
						id: 3,
						name: '儿科',
						icon: '/static/index/erke.png'
					},
					{
						id: 4,
						name: '妇产科',
						icon: '/static/index/fuke.png'
					},
					{
						id: 5,
						name: '肿瘤科',
						icon: '/static/index/zhongliu.png'
					},
					{
						id: 6,
						name: '骨科',
						icon: '/static/index/guke.png'
					}
				],
				popularDoctors: [{
						id: '101',
						name: '张伟',
						avatar: '/static/doctors/man.jpg',
						title: '主任医师',
						department: '内科',
						specialty: '心血管',
						hospital: '北京协和医院',
						experience: 15,
						patients: 5000,
						rating: 4.9,
						collected: false,
					},
					{
						id: '102',
						name: '李明',
						avatar: '/static/doctors/man.jpg',
						title: '副主任医师',
						department: '内科',
						specialty: '呼吸',
						hospital: '上海瑞金医院',
						experience: 12,
						patients: 3800,
						rating: 4.8,
						collected: false,
					},
					{
						id: '103',
						name: '王芳',
						avatar: '/static/doctors/women.png',
						title: '主治医师',
						department: '内科',
						specialty: '消化',
						hospital: '广州市妇女儿童医疗中心',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '201',
						name: '刘强',
						avatar: '/static/doctors/man.jpg',
						title: '主任医师',
						department: '外科',
						specialty: '普外',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '202',
						name: '陈勇',
						avatar: '/static/doctors/man.jpg',
						title: '副主任医师',
						department: '外科',
						specialty: '胸外',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '203',
						name: '赵杰',
						avatar: '/static/doctors/man.jpg',
						title: '主治医师',
						department: '外科',
						specialty: '神经外科',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '301',
						name: '周丽',
						avatar: '/static/doctors/women.png',
						title: '主任医师',
						department: '儿科',
						specialty: '新生儿',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '302',
						name: '吴小红',
						avatar: '/static/doctors/women.png',
						title: '副主任医师',
						department: '儿科',
						specialty: '儿童哮喘',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '401',
						name: '杨华',
						avatar: '/static/doctors/man.jpg',
						title: '主任医师',
						department: '妇产科',
						specialty: '产科',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '402',
						name: '孙燕',
						avatar: '/static/doctors/women.png',
						title: '副主任医师',
						department: '妇产科',
						specialty: '妇科',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '403',
						name: '林玲',
						avatar: '/static/doctors/women.png',
						title: '主治医师',
						department: '妇产科',
						specialty: '生殖',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '501',
						name: '郑阳',
						avatar: '/static/doctors/man.jpg',
						title: '主任医师',
						department: '肿瘤科',
						specialty: '放疗',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '502',
						name: '黄建国',
						avatar: '/static/doctors/man.jpg',
						title: '副主任医师',
						department: '肿瘤科',
						specialty: '化疗',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '601',
						name: '朱伟东',
						avatar: '/static/doctors/man.jpg',
						title: '主任医师',
						department: '骨科',
						specialty: '脊柱',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '602',
						name: '唐明',
						avatar: '/static/doctors/man.jpg',
						title: '副主任医师',
						department: '骨科',
						specialty: '关节',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					},
					{
						id: '603',
						name: '彭辉',
						avatar: '/static/doctors/man.jpg',
						title: '主治医师',
						department: '骨科',
						specialty: '手足',
						hospital: '上海瑞金医院',
						experience: 20,
						patients: 7200,
						rating: 4.9,
						collected: false,
					}
				],
				searchResults: []
			}
		},
		onLoad() {
			this.globaApi = getApp().globalData.baseUrl
			this.getDoctors()
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			searchDoctors() {
				if (!this.searchKeyword.trim()) {
					this.showSearchResult = false;
					return;
				}

				uni.showLoading({
					title: '搜索中...'
				});

				// 模拟搜索请求
				setTimeout(() => {
					uni.hideLoading();
					this.showSearchResult = true;

					// 模拟搜索结果，实际应该调用API
					this.searchResults = this.popularDoctors.filter(doctor =>
						doctor.name.includes(this.searchKeyword) ||
						doctor.department.includes(this.searchKeyword) ||
						doctor.specialty.includes(this.searchKeyword)
					);
				}, 500);
			},
			clearSearch() {
				this.searchKeyword = '';
				this.showSearchResult = false;
			},
			toggleFilter(index) {
				this.filters[index].active = !this.filters[index].active;

				// 如果是下拉类型，应该显示弹出菜单，这里省略实现
				if (this.filters[index].type === 'dropdown') {
					// 显示下拉菜单
				}

				// 重新搜索
				if (this.showSearchResult) {
					this.searchDoctors();
				}
			},
			selectDepartment(dept) {
				this.searchKeyword = dept.name;
				this.searchDoctors();
			},
			async getDoctors() {
				uni.request({
					url: `${this.globaApi}/collect/getCollectByUserId`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							console.log('查询成功');
							if (res.data.data.doctorId === this.popularDoctors.id) {
								this.popularDoctors.collected = true
							}
						} else {
							uni.showToast({
								title: res.data.message || '获取信息失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				})
			},
			collectDoc(doctorId) {
				const doctor = this.popularDoctors.find(doc => doc.id === doctorId);

				if (doctor) {
					// 切换医生的收藏状态
					doctor.collected = !doctor.collected;

					// 更新收藏图标
					if (doctor.collected) {
						// 如果已收藏，使用已收藏的图标
						this.collectDocSrc = '/static/doctors/collected.png';
					} else {
						// 如果未收藏，使用未收藏的图标
						this.collectDocSrc = '/static/doctors/uncollect.png';
					}
				}
				uni.request({
					url: `${this.globaApi}/collect/collectByUserId`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token')
					},
					data: {
						doctorId: doctorId,
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: doctor.collected ? '收藏成功' : '取消收藏',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.message || '收藏失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				})

			},
			viewDoctorProfile(doctor) {
				// 跳转到医生详情页
				uni.navigateTo({
					url: `/pages/index/doctor?id=${doctor.id}&name=${doctor.name}`
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
	}

	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		background-color: #ffffff;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.back-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.placeholder {
		width: 60rpx;
	}

	.search-icon {
		font-size: 32rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.search-container {
		padding: 20rpx;
		/* background-color: #ffffff; */
	}

	.search-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		padding: 0 20rpx;
	}

	.search-input {
		flex: 1;
		height: 80rpx;
		font-size: 30rpx;
	}

	.clear-icon {
		font-size: 24rpx;
		color: #999;
		padding: 10rpx;
	}

	.filter-container {
		background-color: #ffffff;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.filter-scroll {
		white-space: nowrap;
		height: 80rpx;
	}

	.filter-item {
		display: inline-flex;
		align-items: center;
		height: 80rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #666666;
		margin-right: 30rpx;
	}

	.filter-item.active {
		color: #2b85ff;
		font-weight: 500;
	}

	.filter-icon {
		margin-left: 5rpx;
		font-size: 24rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		padding: 30rpx 30rpx 20rpx;
	}

	.popular-departments {
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.department-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 15rpx 30rpx;
	}

	.department-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15rpx 0;
	}

	.dept-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
		background-color: #f0f5ff;
	}

	.dept-name {
		font-size: 26rpx;
		color: #333333;
	}

	.popular-doctors {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.doctor-list {
		padding: 0 30rpx;
	}

	.doctor-card {
		display: flex;
		flex-direction: row;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eeeeee;
	}

	.doctor-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.doctor-avatar image {
		width: 100%;
		height: 100%;
	}

	.doctor-info {
		flex: 1;
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.doctor-title {
		font-size: 24rpx;
		color: #666666;
		margin-left: 10rpx;
		font-weight: normal;
	}

	.doctor-specialty {
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.doctor-hospital {
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 15rpx;
	}

	.doctor-stats {
		display: flex;
		flex-direction: row;
	}

	.stat-item {
		margin-right: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}

	.stat-value {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		margin-right: 5rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999999;
	}

	.doctor-action {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-btn {
		width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #f0f5ff;
		color: #2b85ff;
		border-radius: 30rpx;
		font-size: 26rpx;
	}

	.search-results {
		background-color: #ffffff;
		margin-top: 20rpx;
		flex: 1;
	}

	.result-count {
		padding: 20rpx 30rpx;
		font-size: 26rpx;
		color: #999999;
		border-bottom: 1rpx solid #eeeeee;
	}

	.no-results {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 100rpx;
	}

	.no-result-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.no-result-text {
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.no-result-tip {
		font-size: 26rpx;
		color: #999999;
	}

	.collImg {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 40rpx;
	}
</style>